<template>
	<view class="activityDetails">
		<view class="state"> {{info.status_name}} </view>
		
		<view class="box">
			<view class="box-left"> 提现编号： </view>
			<view class="box-right"> {{info.withdraw_no}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 提现业绩值： </view>
			<view class="box-right num"> {{info.achievement}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 提现手续费： </view>
			<view class="box-right num"> {{info.charge}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 到账业绩值： </view>
			<view class="box-right num"> {{info.money}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 提现方式： </view>
			<view class="box-right"> {{info.type_name}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 提现账户号： </view>
			<view class="box-right"> {{info.arrival}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 提现备注： </view>
			<view class="box-right remark"> {{info.remark}} </view>
		</view>
		<view class="box">
			<view class="box-left"> 提现时间： </view>
			<view class="box-right"> {{info.time}} </view>
		</view>
		<view class="box" v-if="info.status == 2">
			<view class="box-left"> 到账时间： </view>
			<view class="box-right"> {{info.operate_time}} </view>
		</view>
		<view class="box" style="border: 0;" v-if="info.imgList.length > 0">
			<view class="box-left"> 
				<image v-for="(imgItem, index) in info.imgList" 
				class="box-img" 
				:src="imgItem.thumbUrl" 
				mode=""  
				@tap="previewImage" 
				:data-src="imgItem.imgUrl">
				</image>
			</view>
		</view>
				
		<button class="customer-service" open-type="contact">
			<image class="service-img" lazy-load="true" src="../static/img/customer-service.png" mode="scaleToFill"></image>
		</button>
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'" v-if="info.status == 1">
			<view class="but" @click="cancel()">取消申请</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				id: 0,
				info: {
					id: '',
					withdraw_no: '',
					type_name: '',
					arrival: '',
					money: '',
					achievement: '',
					charge: '',
					remark: '',
					status: 0,
					status_name: '',
					time: '',
					operate_time: '',
					imgList: [],
				},
				imgList: [],
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/increase/view',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: _self.id
					}
				}).then(res => {
					uni.hideLoading();
					if(res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									common.jump('return_one')
								}, 2000) 
							}
						});
						return ;
					}
					_self.info = res.data;
					if(_self.info.imgList.length > 0) {
						_self.imgList = [];
						_self.info.imgList.forEach((imgItem, imgKey) => {
							_self.imgList[imgKey] = imgItem.imgUrl;
						});
					}	
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: _self.imgList
				});
				return ;
			},
			cancel() {
				uni.showModal({
					title: '提示',
					content: '确定取消当前业绩提现申请吗？',
					success: function (res) {
						if (res.confirm) {
							serve.request({
								url: '/spread/increase/cancel',
								data: {
									appkey: uni.getStorageSync('appkey'),
									'access-token': uni.getStorageSync('access-token'),
									id: _self.id,
								}
							}).then(result => {
								let resuleCode = result.code;
								let resultMessage = result.message;
								uni.showToast({
									title: resultMessage,
									icon: 'none',
									success() {
										if(resuleCode == 200){
											_self.info.status = -1;
											_self.info.status_name = '已取消';
											_self.$forceUpdate();
										}
									}
								});
							});
						} 
					}
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			_self.id = options.id || 0;
			if(_self.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							common.jump('return_one')
						}, 2000) 
					}
				});
			}
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 178;
			}
			uni.showLoading({
				title: '加载中···',
				mask: true
			});
			_self.getInfo();
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中···',
				mask: true
			});
			_self.getInfo();
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding: 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	
	.state{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 60rpx 0;
		font-size: 80rpx;
		color: #333;
	}
	.box{
		border-bottom: 2rpx solid #ededed;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #333333;
	}
	.box-left{
		position: relative;
	}
	.box-img{
		width: 200rpx;
		height: 200rpx;
		padding: 10rpx;
	}
	
	.box-right{
		
	}
	.remark{
		width: 500rpx;
		text-align: right;
	}
	.time{
		color: #999999;
	}
	.num{
		color: #f35353;
	}

	.customer-service{
		position: fixed;
		right: 20rpx;
		bottom: 80rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(255,255,255,0);
		bottom: 300rpx;
		padding: 0;
		margin: 0;
		
	}
	.customer-service::after {
	  border: none
	}
	.service-img{
		
		width: 100%;
		height: 100%;
	}
	
	


	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	
</style>
